<template>
  <div class="container">
    <el-dialog
      :visible="showDialog"
      title="题目预览"
      width="900px"
      @close="close"
    >
      <!-- 题型 -->
      <el-row class="one">
        <el-col :span="6">
          <span v-if="pvw.questionType === '1'">【题型】: 单选题</span>
          <span v-else-if="pvw.questionType === '2'">【题型】: 多选题</span>
          <span v-else>【题型】: 简答题</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】: {{ pvw.id }}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="pvw.difficulty === '1'">【难度】: 简单</span>
          <span v-else-if="pvw.questionType === '2'">【题型】: 一般</span>
          <span v-else>【题型】: 困难</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】: {{ pvw.tags }}</span>
        </el-col>
      </el-row>
      <el-row class="two">
        <el-col :span="6">
          <span>【学科】: {{ pvw.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】: {{ pvw.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】: {{ pvw.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <!-- 题干 -->
      <el-row>
        <el-col>【题干】：</el-col>
      </el-row>
      <el-row>
        <el-col>
          <div v-html="pvw.question" style="color: blue"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span v-if="pvw.questionType === '1'"
            >单选题 选项：（以下选中的选项为正确答案）</span
          >
          <span v-else-if="pvw.questionType === '2'"
            >多选题 选项：（以下选中的选项为正确答案）</span
          >
          <span v-else></span>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="pvw.questionType === '1'">
          <div v-for="item in pvw.options" :key="item.id">
            <el-radio v-model="radio" :label="item.isRight" class="radios">{{
              item.title
            }}</el-radio>
          </div>
        </el-col>
        <el-col v-if="pvw.questionType === '2'">
          <div>
            <el-checkbox-group
              v-model="checkList"
              v-for="item in pvw.options"
              :key="item.id"
            >
              <el-checkbox :label="item.isRight">{{ item.title }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <hr />
      <!-- 参考答案 -->
      <el-row>
        <el-col
          >【参考答案】：<el-button type="danger" @click="video = true"
            >视频答案预览</el-button
          ></el-col
        >
        <el-col v-if="video"
          ><video
            class="srcs"
            src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/52e63a10-aecd-11ea-b43d-2358b31b6ce6.mp4"
            controls
          ></video
        ></el-col>
      </el-row>
      <hr />
      <!-- 答案解析 -->
      <el-row>
        <el-col>【答案解析】：<span v-html="pvw.answer"></span></el-col>
      </el-row>
      <hr />
      <!-- 题目备注 -->
      <el-row class="foot">
        <el-col>【题目备注】：{{ pvw.remarks }}</el-col>
      </el-row>
      <!-- 按钮 -->
      <el-button type="primary" class="closes" @click="close">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showDialog: { type: Boolean, require: false },
    pvw: { type: Object }
  },
  data () {
    return {
      video: false,
      radio: 1,
      checkList: [1]
    }
  },
  methods: {
    close () {
      this.$emit('close')
      this.video = false
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  position: relative;
}
.one {
  margin-top: 8px;
  margin-bottom: 20px;
}
.two {
  margin-top: 15px;
  margin-bottom: 15px;
}
.radios {
  margin-top: 15px;
}
.foot {
  margin-bottom: 70px;
}
.closes {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.srcs {
  width: 300px;
  height: 300px;
}
</style>
